<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>爱情电影</title>
		<style type="text/css">
			.background{
				width: 100%;
				height: 1000px;
				background-color: #030303;
			}
			.title{
				margin-left: 700px;
				color: aliceblue;
			}
			.row{
				width: 1300px;
				height: 250px;
				margin-left: 100px;
				display: flex;
				flex-direction:row ;
				margin-top: 50px;

			}
			.box1{
				width: 200px;
				height:100%;
				display: flex;
				flex-direction: column;
				margin-left: 40px;

			}
			.img{
				width: 200px;
				height: 200px;
				margin-top: 10px;
			}
			.img_attribute{
				width: 200px;
				height: 200px;
				border-radius: 5px;
			}
			.text{
				width: 200px;
				height: 10px;
				color: beige;
				margin-top: 2px;
				margin-left: 55px;
			}
			.button{
				width: 100px;
				height: 30px;
				border-radius: 10px;
			}
			.box_inside{
				display: flex;
				flex-direction: row;
				width: 200px;
				height: 30px;
			}
			.tabcollect{
				width:30px ;
				height: 30px;
				margin-left:50px;

			}
			.img_collection{
				width:30px ;
				height: 30px;
				border-radius: 50px;
			}
		</style>
	</head>
	<body>
		<div class="background">
			<h1 class="title">爱情电影</h1>

			<div id="group">

			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

		<script>
			// $.ajax({
			//     url: "app/list",
			//     data: {},
			//     method: "POST",
			//     success: res => {
			//
			//     }, error: res => {
			//     }
			// })
			function  sc(event) {
				let text = $(this).parent().prev().text()
				console.log(text)
				$.ajax({
					url: 'collection/add',
					data: {
						"id": event
					},
					success: res => {
						alert("操作成功")
						location.reload()
					},
					error: res => {
						alert("收藏失败")
					}
				})
			}

			// 收藏
			// $('.box_inside .tabcollect').click(sc())
			// 下载
			$('.box_inside button').click(event => {
				let text = $(this).parent().prev().text()
				$.ajax({
					url: 'file/download',
					data: {
						"name": text
					},
					success: res => {
						alert("下载成功")
					},
					error: res => {
						alert("下载失败")
					}
				})
			})

			function ss() {
				$('#group').html('')

				$.ajax({
					url: 'app/list',
					data: {
						"name": $('#key').val(),
						"type":2
					},
					success: res => {
						if (res.length < 1) {
							$('#group').innerHTML('当前分类: 无应用')
						}
						let html = `<div class="row">`;
						for (let i = 0; i < res.length; i++) {
							let r = res[i]
							if (i > 0 && i % 5 == 0) {
								html += `</div><div class="row">`
							}
							html += `
                        <div class="box1">
                            <div class="img"><img src="${r.img}" class="img_attribute"/></div>
                            <h3 class="text">${r.name}</h3>
                            <div class="box_inside">
                                <a href="file/download?name=${r.name}&img=${r.img}"  download="images/img-16.png">
                                <button type="button" class="button">下载观看</button></a>
                                <div class="tabcollect" onclick="sc(${r.id})"><img src="${r.collect ? "images/a.png":"https://img-blog.csdnimg.cn/e8eb83b0a09d4c2dab5cc9aa454101ce.png"}" class="img_collection"></div>
                            </div>
                        </div>`;

						}
						$('#group').append(html + `</div>`)
					},
					error: res => {
						$('#group').innerHTML('当前分类无应用')
					}
				})
			}
			ss()
		</script>
	</body>
</html>

